<script setup>
import { ref, computed, watchEffect, nextTick } from 'vue';

const props = defineProps({
  gameView: Object
});

// 合并存储图片和视频
const mediaList = ref([]);
// 合并 imageUrl 和 videoUrl 成一个数组
// 使用 watchEffect 监视 props.gameView 的变化
watchEffect(() => {
  const imageUrl = props.gameView.imageUrl || [];
  const videoUrl = props.gameView.videoUrl || [];
  // 合并 imageUrl 和 videoUrl 成一个数组
  mediaList.value = [
    ...videoUrl.map(video => ({ ...video, type: 'video' })),
    ...imageUrl.map(image => ({ ...image, type: 'image' }))
  ];
});

const currentMediaIndex = ref(0);

// 当前显示的图片或者视频
// 定义 currentMedia 计算属性
const currentMedia = computed(() => {
  if (mediaList.value.length === 0) {
    return { type: '', url: '' }; // 返回一个默认值
  }
  return mediaList.value[currentMediaIndex.value];
});

// 点击缩略图时显示的索引改变
const showMedia = (index) => {
  currentMediaIndex.value = index;
  scrollToCurrent();
};

// 上一个图片/视频
const prevMedia = () => {
  currentMediaIndex.value = (currentMediaIndex.value - 1 + mediaList.value.length) % mediaList.value.length;
  scrollToCurrent();
};

// 下一个图片/视频
const nextMedia = () => {
  currentMediaIndex.value = (currentMediaIndex.value + 1) % mediaList.value.length;
  scrollToCurrent();
};

const listBoxParent = ref(null)
const listBox = ref(null);
const scrollToCurrent = () => {
  nextTick(() => {
    const listBoxParentElement = listBoxParent.value
    const listBoxElement = listBox.value;
    const currentItem = listBoxElement.children[currentMediaIndex.value];
    const listBoxParentRect = listBoxParentElement.getBoundingClientRect();
    const itemRect = currentItem.getBoundingClientRect();

    if (itemRect.left < listBoxParentRect.left) {
      listBoxParentElement.scrollLeft -= (listBoxParentRect.left - itemRect.left);
    } else if (itemRect.right > listBoxParentRect.right) {
      listBoxParentElement.scrollLeft += (itemRect.right - listBoxParentRect.right);
    }
  })
}
</script>



<template>
  <div class="game-view">
    <div class="top">
      <div class="show">
        <video v-if="currentMedia.type === 'video'" :src="currentMedia.url" controls></video>
        <img v-if="currentMedia.type === 'image'" :src="currentMedia.url" alt="Game View" />
      </div>
    </div>
    <div class="bottom">
      <div class="button" @click="prevMedia"><i class="iconfont icon-icon-arrow-left2"/></div>
      <div class="list-box-parent" ref="listBoxParent">
        <div class="list-box" ref="listBox">
          <div
              class="item"
              v-for="(media, index) in mediaList"
              :key="media.id"
              @click="showMedia(index)"
              :class="{ active: currentMediaIndex === index }">
            <img v-if="media.type === 'image'" :src="media.url"/>
            <video v-if="media.type === 'video'" :src="media.url" muted></video>
          </div>
        </div>
      </div>
      <div class="button" @click="nextMedia"><i class="iconfont icon-icon-arrow-right2"/></div>
    </div>
  </div>
</template>



<style scoped lang="scss">
.game-view {
  .top {
    width: 720px;
    height: 405px;
    overflow: hidden;
    .show {
      border: black solid 2px;
      img,
      video {
        max-width: 100%;
        max-height: 100%;
        display: block; /* 确保视频标签是块级元素， 不会影响element的css样式 */
      }
    }
  }
  .bottom {
    width: 720px;
    height: 70px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .list-box-parent {
      margin: 0 10px;
      flex: 1;
      position: relative;
      height: 70px;
      overflow: hidden;
      .list-box {
        position: absolute;
        display: flex;
        .item {
          height: 70px;
          width: 130px;
          margin: 0 4px;
          overflow: hidden;
          position: relative;
          cursor: pointer;
          img {
            width: 100%;
            object-position: top;
            object-fit: cover;
          }
          video {
            width: 100%;
            object-position: top;
            object-fit: cover;
          }
        }
        .active::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 3px solid #c6d4df;
          box-sizing: border-box; /* 确保边框不会影响元素大小 */
          pointer-events: none;
        }
      }
    }
    .button {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      background-color: $decorativeColor;
      color: #cccccc;
      i {
        font-size: 22px;
      }
      &:hover {
        background-color: $textColor;
        color: $themeColor;
      }
    }
  }
}
</style>


